<template>
    <div class="father">
       <h2>readonly更改sum1</h2>
        <div>当前求和为：{{ sum }}</div>
        <hr>
        <div>仅读：{{ sum1 }}</div>
        <button @click="changeNum">更改sum</button>
        <button @click="changeNum1">readonly更改sum1</button>
        <h2>shallowReadonly</h2>
        <div>当前求和为：{{ car }}</div>
        <hr>
        <div>仅读：{{ car1 }}</div>
        <button @click="changeCar">shallowReadonly更改汽车</button>
        <button @click="changeCarColor">shallowReadonly更改汽车颜色</button>
        <button @click="changeCarPrice">shallowReadonly更改汽车价格</button>

    </div>
</template>

<script setup lang="ts" name="Father">
import {ref,reactive,readonly, shallowReadonly} from 'vue'
let sum = ref(0)
// readonly所需的必须是一个响应式的数据  与sum关联，后续sum改变后sum1跟随改变，但是不可以直接修改sum1
let sum1 = readonly(sum)

let car = reactive({
    car:'奔驰',
    options:{
        color: '红色',
        price: 50
    }
})
let car1 = shallowReadonly(car)


function changeNum() {
    sum.value += 1
}
function changeNum1() {
    // sum1.value += 1
}

// shallowReadonly

function changeCar() {
    car.car = '宝马' // 可以照常修改
    // car1.car = '宾利' // 浅层数据不可修改，仅为只读-shallowReadonly
}

function changeCarColor() {
    // car.options.color = '橙色' // 可以照常修改
    car1.options.color = '粉色' // 可以照常修改-shallowReadonly

}
function changeCarPrice() {
    // car.options.price+=20 // 可以照常修改
    car1.options.price+=40 // 可以照常修改-shallowReadonly
}
</script>

<style scoped>
    .father{
        background-color: rgb(165, 164, 164);
        padding: 20px;
        border-radius: 10px;
    }
</style>